/*
  学习目标：组件逻辑复用三种方式-Render Props
  本质:
  1. render是一个props属性, 是一个函数, render负责渲染组件
  2. render的形参传递逻辑
  3. render渲染的子组件, 通过props接收逻辑
   
*/
import React, { useState } from 'react';
import Footer from './Footer';
import Header from './Header';
import Main from './Main';

export default function App() {
  return (
    <div>
      <Mouse
        render={({ mouse, handleMouseMove }) => {
          return <Header mouse={mouse} handleMouseMove={handleMouseMove} />;
        }}
      />

      <Mouse
        render={({ mouse, handleMouseMove }) => {
          return <Footer mouse={mouse} handleMouseMove={handleMouseMove} />;
        }}
      />

      <Mouse
        render={({ mouse, handleMouseMove }) => {
          return <Main mouse={mouse} handleMouseMove={handleMouseMove} />;
        }}
      />
    </div>
  );
}

function Mouse({ render }) {
  const [mouse, setMouse] = useState({ x: 0, y: 0 });
  const handleMouseMove = (e) => {
    setMouse({ x: e.clientX, y: e.clientY });
  };

  return render({ mouse, handleMouseMove });
}
